<template>
	<view>
		<view class="block">
			<view class="block-title">基本信息</view>
			<view class="list">
				<view class="item" @click="avatarChange">
					<view class="title">头像</view>
					<view class="input">
						<image class="avatar" :src="userinfo.head_pic" mode="aspectFill"></image>
						<image src="/static/images/right1.png" mode="widthFix" class="img"></image>
					</view>
				</view>
				
				<view class="item">
					<view class="title">昵称</view>
					<view class="input">
						<input type="text" @confirm="nicknameConfirm" :cursor-spacing="15" confirm-type="done" class="inp" v-model="userinfo.nickname" placeholder="请输入" placeholder-class="place-class" />
						<image src="/static/images/right1.png" mode="widthFix" class="img"></image>
					</view>
				</view>

				<picker mode="selector" :range="sexData" range-key="title" @change="sexChange">
					<view class="item">
						<view class="title">性别</view>
						<view class="input">
							<text class="txt">{{userinfo.sex == 1 ? '男' : (userinfo.sex == 2 ? '女' : '保密')}}</text>
							<image src="/static/images/right1.png" mode="widthFix" class="img"></image>
						</view>
					</view>
				</picker>

				<view class="item">
					<view class="title">手机号</view>
					<view class="input">
						<input type="text" @confirm="mobileConfirm" :cursor-spacing="15" confirm-type="done" class="inp" v-model="userinfo.mobile" placeholder="请输入" placeholder-class="place-class" />
						<image src="/static/images/right1.png" mode="widthFix" class="img"></image>
					</view>
				</view>

				<view class="item">
					<view class="title">微信号</view>
					<view class="input">
						<input type="text" @confirm="wechatConfirm" :cursor-spacing="15" confirm-type="done" class="inp" v-model="userinfo.weichat" placeholder="请输入微信号" placeholder-class="place-class" />
						<image src="/static/images/right1.png" mode="widthFix" class="img"></image>
					</view>
				</view>

				<view class="item">
					<view class="title">line号</view>
					<view class="input">
						<input type="text" @confirm="linkchatConfirm" :cursor-spacing="15" confirm-type="done" class="inp" v-model="userinfo.linkchat" placeholder="请输入Line号" placeholder-class="place-class" />
						<image src="/static/images/right1.png" mode="widthFix" class="img"></image>
					</view> 
				</view>
				
				<view class="item" @click="bindWechat">
					<view class="title">微信绑定</view>
					<view class="input">
						<text class="txt" v-if="userinfo.is_bindchat == 1">已绑定</text>
						<text class="place-class" v-else>未绑定微信</text>
						<image src="/static/images/right1.png" mode="widthFix" class="img"></image>
					</view>
				</view>
			</view>
		</view>

		<view class="block">
			<view class="block-title">登录信息</view>
			<view class="list">
				<view class="item">
					<view class="title">登录账号</view>
					<view class="input">
						<text class="txt">{{userinfo.username}}</text>
					</view>
				</view>

				<view class="item" @click="editPass">
					<view class="title">登录密码</view>
					<view class="input">
						<text class="txt">********</text>
						<image src="/static/images/right1.png" mode="widthFix" class="img"></image>
					</view>
				</view>
			</view>
		</view>
		
		<view class="block">
			<view class="block-title">APP信息</view>
			<view class="list">
				<view class="item">
					<view class="title">APP备案编号</view>
					<view class="input">
						<text class="txt">粤ICP备19133589号-2A</text>
					</view>
				</view>
		
			</view>
		</view>

		<view class="operation">
			<view class="operation-item logout-btn" @click="logoutConfirm">退出登录</view>
			<view class="operation-item lock-btn" @click="lockConfirm">注销</view>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations
	} from 'vuex';
	import {
		userLogout,
		getUserinfo,
		userinfoEdit
	} from '@/api/user.js';
	import {uploadAvatar} from '@/api/upload.js';
	export default {
		data() {
			return {
				userinfo: {},
				sexData: [
					{title: '男', value: 1},
					{title: '女', value: 2}
				]
			};
		},
		async onLoad() {
			await this.loadData();
		},
		methods: {
			...mapMutations(['logout']),
			async wechatConfirm() {
				if (!this.userinfo.weichat) {
					uni.showToast({
						title: '请输入微信号',
						icon: 'none'
					});
					return;
				}
				if (!await this.userinfoEditFuc({weichat: this.userinfo.weichat})) {
					return;
				}
				uni.showToast({
					title: '修改成功',
					icon: 'none'
				});
			},
			async linkchatConfirm() {
				if (!this.userinfo.linkchat) {
					uni.showToast({
						title: '请输入Line号',
						icon: 'none'
					});
					return;
				}
				if (!await this.userinfoEditFuc({linkchat: this.userinfo.linkchat})) {
					return;
				}
				uni.showToast({
					title: '修改成功',
					icon: 'none'
				});
			},
			async mobileConfirm() {
				if (!this.userinfo.mobile) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					});
					return;
				}
				if (this.userinfo.mobile.length < 5) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					});
					return;
				}
				if (!await this.userinfoEditFuc({mobile: this.userinfo.mobile})) {
					return;
				}
				uni.showToast({
					title: '修改成功',
					icon: 'none'
				});
			},
			async nicknameConfirm() {
				if (!this.userinfo.nickname) {
					uni.showToast({
						title: '请输入昵称',
						icon: 'none'
					});
					return;
				}
				if (!await this.userinfoEditFuc({nickname: this.userinfo.nickname})) {
					return;
				}
				uni.showToast({
					title: '修改成功',
					icon: 'none'
				});
			},
			async avatarChange() {
				try{
					let [chooseErr, chooseRes] = await uni.chooseImage({
						count: 1
					});
					console.log(chooseErr, 1);
					if (chooseErr !== null) {
						return;
					}
					let tempFilePaths = chooseRes.tempFilePaths || [];
					if (!tempFilePaths) {
						return;
					}
					uni.showLoading({
						title: '文件上传'
					});
					let res = await uploadAvatar(tempFilePaths[0]);
					uni.hideLoading();
					let avatar = res.data.image;
					if (!await this.userinfoEditFuc({head_pic: avatar})) {
						return;
					}
					uni.showToast({
						title: '修改成功',
						icon: 'none'
					});
					// this.userinfo.head_pic = this.$getImageUrl(avatar);
					this.userinfo.head_pic = avatar;
				}catch(e){
					console.log(e);
				}
			},
			async sexChange(event) {
				let index = event.detail.value,
					sexVal = this.sexData[index].value;
				if (sexVal == this.userinfo.sex) {
					return;
				}
				if (!await userinfoEdit({sex: sexVal})) {
					return;
				}
				uni.showToast({
					title: '修改成功',
					icon: 'none'
				});
				this.userinfo.sex = sexVal;
			},
			async userinfoEditFuc(data) {
				try{
					await userinfoEdit(data);
					return true;
				}catch(e){
					console.log(e);
					return false;
				}
			},
			async bindWechat() {
				try {
					if (this.userinfo.is_bindchat == 1) {
						return;
					}
					let [modalErr, modalRes] = await uni.showModal({
						title: '提示',
						content: '是否绑定微信？'
					});
					if (modalErr !== null || !modalRes.confirm) {
						return;
					}
					let url = 'https://open.weixin.qq.com/connect/oauth2/authorize',
						param = {
							appid: 'wx1329bf0aa9cb6c4a',
							redirect_uri: encodeURIComponent(this.$visitDomain),
							response_type: 'code',
							scope: 'snsapi_userinfo',
							state: 'STATE',
							forcePopup: true,
							forceSnapShot: true
						},
						paramArr = [],
						paramStr = '';
					for (let key in param) {
						paramArr.push([key, param[key]].join('='));
					}
					paramStr = paramArr.join('&')
					url = `${url}?${paramStr}#wechat_redirect`;
					console.log(url, 123124124);
					window.location.href = url;
				} catch (e) {
					console.log(e);
					uni.showToast({
						title: e.message,
						icon: 'none'
					});
				}
			},
			async loadData() {
				try {
					let res = await getUserinfo();
					this.userinfo = res.data;
				} catch (error) {
					console.log(error);
				}
			},
			async logoutConfirm() {
				try {
					let [modalErr, modalRes] = await uni.showModal({
						title: '提示',
						content: '退出登录？'
					});
					if (modalErr !== null || !modalRes.confirm) {
						return;
					}
					await userLogout();
					uni.reLaunch({
						url: '/pages/login/index'
					});
				} catch (error) {
					console.log(error);
				}
			},
			async lockConfirm() {
				try {
					let [modalErr, modalRes] = await uni.showModal({
						title: '提示',
						content: '是否注销当前用户？'
					});
					if (modalErr !== null || !modalRes.confirm) {
						return;
					}
					await userinfoEdit({is_lock: 1});
					uni.reLaunch({
						url: '/pages/login/index'
					});
				} catch (error) {
					console.log(error);
				}
			},
			editPass() {
				uni.navigateTo({
					url: '/pages/user/pass'
				});
			}
		}
	}
</script>

<style lang="scss">
	.block {
		width: 100%;

		.block-title {
			background-color: #F5F5F5;
			padding: 0 30rpx;
			width: 100%;
			height: 80rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			font-size: 28rpx;
			font-weight: bold;
			color: #333;
		}

		.list {
			width: 100%;
			padding: 0 30rpx;
			box-sizing: border-box;

			.item {
				width: 100%;
				padding: 50rpx 0;
				box-sizing: border-box;
				border-bottom: 2rpx solid rgba(#979797, .14);
				display: flex;
				align-items: center;
				justify-content: space-between;

				.title {
					font-size: 30rpx;
					font-weight: 500;
					color: #666;
				}

				.input {
					flex: 1;
					padding-left: 30rpx;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					justify-content: flex-end;

					.place-class,
					.inp,
					.txt {
						font-size: 30rpx;
						font-weight: 500;
						color: #999;
						text-align: right;
						height: 1.6em;
						line-height: 1.6em;
					}

					.inp,
					.txt {
						flex: 1;
						color: #333;
					}

					.img {
						margin-left: 20rpx;
						width: 16rpx;
						height: 28rpx;
					}
					
					.avatar {
						width: 100rpx;
						height: 100rpx;
						border-radius: 8rpx;
						box-shadow: 0 0 10rpx #eee;
					}
				}
			}

			.item:last-of-type {
				border-bottom: none;
			}
		}
	}

	.operation {
		width: 100%;
		padding: 50rpx 30rpx 100rpx 30rpx;
		box-sizing: border-box;

		.operation-item {
			margin-bottom: 20rpx;
			width: 100%;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #eee;
			border-radius: 10rpx;
			font-size: 28rpx;
			color: #999;
		}

		.logout-btn {
			background-color: #eee;
			color: #999;
		}
		.lock-btn {
			background-color: #409EFF;
			color: #fff;
		}
	}
</style>
